<style lang="less" scoped>
    .main {
        flex: 1;
    }

    .Business {
        padding: 0.24rem 0.3rem 0;
        .item {
            padding: 0.33rem 0.2rem 0.44rem 0.22rem;
            display: flex;
            justify-content: space-between;
            background: #fff;
            font-size: 0.32rem;
            color: #222;
            border-radius: .1rem;
            box-shadow: 0px 0px 0.16rem rgba(0, 0, 0, 0.16);
            margin-bottom: 0.16rem;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .item_l {
            width: 2.16rem;
            height: 1.8rem;
            /*height: 1.5rem;*/
            padding-right: 0.36rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .item_r {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item_r_t {
                display: flex;
                justify-content: space-between;
                span:first-child {
                    max-width: 70%;
                }
            }
            .item_r_c {
                padding-bottom: 0.1rem;
                margin: 0.2rem 0 0.1rem;
                border-bottom: 1px solid #ebebeb;
                font-size: 0.26rem;
                color: #646464;
            }
            .item_r_b {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }

    .main_bottom {
        padding: 0.1rem 0.3rem;
        height: 1rem;
    }
</style>
<template>
    <div>
        <v-header title="商家列表">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div class="main_allScroll" :style="{top:interactive.statusBarHeight.height,paddingBottom: '1.2rem'}">
            <div class="noBusiness" v-if=" !business.businessList.content || business.businessList.content.length == 0">
                <div class="business_icon" style="margin-bottom: 0.75rem"></div>
                <span>您还没有成为商家，赶紧入驻吧~</span>
            </div>
            <div class="Business" v-else>
                <div>
                    <div class="item" v-for="businessInfo in business.businessList.content"
                         v-on:click="gotoPage(businessInfo)">
                        <div class="item_l">
                            <img v-lazy="{src: businessInfo.mainImg}" :alt="title"/>
                        </div>
                        <div class="item_r">
                            <div class="item_r_t">
                                <span>{{businessInfo.merchantName || '设置门店名称'}}</span>
                                <div class="businnessStatus" v-if="businessInfo.status == 1 || businessInfo.status == 4">已认证</div>
                                <div class="businnessStatus active" v-else-if="businessInfo.status == 0">审核中</div>
                                <div class="businnessStatus active" v-else-if="businessInfo.status == 2">审核失败</div>
                                <div class="businnessStatus active" v-else>冻结中</div>
                            </div>
                            <div class="item_r_c">
                                {{businessInfo.categoryName}}
                            </div>
                            <div class="item_r_b" v-show="!(businessInfo.status == 0 || businessInfo.status == 3)"
                                 style="font-size: 0.26rem;margin-top: 0.1rem;">
                                <span>详情</span>
                                <div class="right_icon" style="margin-left: 0.16rem"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_bottom" v-on:click="addBusiness">
            <button class="btns" style="color:#fff;font-size: 0.36rem;">商家入驻</button>
        </div>
    </div>
</template>
<script>
    import {SET_BUSINESS, UPDATE_UPDATELIST} from 'store/business'
    import {mapActions, mapState} from 'vuex'
    import {AlertModule} from 'vux'

    export default {
        components: {
            AlertModule
        },
        data() {
            return {};
        },
        activated: function () {
            this.getBusiness();
            /*if(this.business.updataList.type){
                this.getBusiness();  //获取商家列表
            }*/
        },
        methods: {
            ...mapActions([SET_BUSINESS, UPDATE_UPDATELIST]),
            //获取商家列表
            getBusiness() {
                this.$ajax.business.queryMerchantsInfo()
                    .then((res) => {
                        this.SET_BUSINESS(res.body);
                        // this.UPDATE_UPDATELIST(false);
                    })
            },
            //  商家入驻
            addBusiness: function () {
                let that = this;
                if (this.user.authentication == 0) {
                    this.$vux.confirm.show({
                        title: '操作提示',
                        content: '您还未进行实名认证，是否前去认证？',
                        onConfirm() {
                            that.$router.push({path: '/my/verified?type=1'});
                        }
                    })
                }  else {
                    this.$router.push({path: '/my/business/businessLicense'})
                }
            },
            //  查看门店详情
            gotoPage(s) {
                let that = this;
                // 0.审核中，1.审核成功，2.审核失败 3 冻结 4：已认证但是没填信息
                if (s.status == 3) {
                    this.$vux.alert.show({
                        title: '系统提示',
                        content: '您的门店已被冻结，请联系客服人员！'
                    })
                    return;
                }
                if(s.status == 0){
                    this.$vux.alert.show({
                        title: '系统提示',
                        content: '您的门店正在审核，请耐心等待！'
                    })
                    return;
                }
                if (s.status == 2) {
                    that.$vux.confirm.show({
                        title: '操作提示',
                        content: '认证失败，点击确认重新提交申请',
                        onConfirm() {
                            if(s.licenseStatus == 1){
                                that.$router.push({
                                    path: "/my/business/addBusiness", query: {
                                        merchantId: s.merchantId,
                                        licenseStatus: 1,
                                        error: 'error'
                                    }
                                })
                            } else {
                                that.$router.push({
                                    path: '/my/business/businessLicense', query: {
                                        merchantId: s.merchantId,
                                    }
                                })
                            }
                        }
                    })

                } else if (s.status == 4) {
                    that.$vux.confirm.show({
                        title: '提示',
                        content: '您还未添加门店信息，是否前去添加',
                        onConfirm() {
                            that.$router.push({
                                path: '/my/business/addBusiness', query: {
                                    merchantId: s.merchantId,
                                    licenseStatus: 1
                                }
                            })
                        }
                    })
                } else {
                    console.log(s)
                    this.$router.push({
                        path: '/my/business_detail', query: {
                            merchantId: s.merchantId
                        }
                    })
                }
            }
        },
        computed: mapState({
            business: state => state.business,
            user: state => state.user,
            interactive: state => state.interactive
        }),

    }
</script>